<template>
  <div class="analytics-card">
    <div class="month-label">Overall Performance</div>
    <div class="chart-container">
      <!-- 加载状态 -->
      <div v-if="loading" class="skeleton-chart">
        <div class="skeleton-circle"></div>
        <div class="skeleton-text"></div>
        <div class="skeleton-percentage"></div>
      </div>

      <!-- 数据加载完成后显示图表 -->
      <PieChart
        v-else
        :option="optionPie"
        :height="'1.25rem'"
        :width="'1.6rem'"
        renderer="svg"
      ></PieChart>
    </div>
  </div>
</template>

<script>
import { fontChart } from "@/utils/echartPxToRem";
import PieChart from "@components/common/PieChart.vue";

export default {
  components: {
    PieChart,
  },
  props: {
    categories: {
      type: Object,
      required: true,
      default: () => ({
        hotelName: "",
        startDate: "",
        endDate: "",
        score: 0,
        negative: 0,
        neutral: 0,
        positive: 0,
      }),
      validator(value) {
        return !!value; // 验证存在性
      },
    },
  },
  data() {
    return {
      loading: true, // 初始加载状态
      optionPie: null, // 初始化为null，等待数据加载完成后设置
    };
  },
  watch: {
    // 监听categories变化，更新图表
    categories: {
      immediate: true, // 初始化时立即执行一次
      handler(newVal) {
        if (this.isValidData(newVal)) {
          this.initChartOptions(newVal);
          this.loading = false; // 数据有效时，关闭加载状态
        } else {
          this.loading = true; // 数据无效时，显示加载状态
        }
      },
    },
  },
  methods: {
    // 验证数据有效性
    isValidData(data) {
      if (!data) return false;
      const requiredFields = ["score", "negative", "neutral", "positive"];
      return requiredFields.every((field) => data[field] !== undefined);
    },

    // 初始化图表配置
    initChartOptions(data) {
      // 检测屏幕宽度，设置响应式字体大小
      const isSmallScreen = window.innerWidth < 1150;
      const labelFontSize = isSmallScreen ? 10 : 12;

      this.optionPie = {
        legend: {
          top: "5%",
          left: "center",
          bottom: "5%",
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "45%",
            silent: true, // 禁用图形元素的交互
            style: {
              text: data.score,
              textAlign: "center",
              fill: "#000",
              fontSize: 20,
              fontWeight: "bold",
            },
          },
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            top: "10%",
            left: "0%",
            bottom: "10%",
               radius: ["55%", "70%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            padAngle: 0.02,
            stillShowZeroSum: true, // 总和为0时也显示
            itemStyle: {
              borderRadius: 15,
              borderColor: "#fff",
              borderWidth: 2,
            },
            silent: true,
            label: {
              show: true,
              formatter: function (params) {
                return `${params.name} ${Math.floor(params.percent)}%`;
              },
              position: "outside",
              padding: [-25, -25],
              distanceToLabelLine: -3,
              textStyle: {
                fontSize: labelFontSize, // 使用响应式字体大小
                fontWeight: "normal",
              },
            },
            labelLine: {
              show: false,
              labelStyle: {
                color: "#000 !important",
                fontSize: labelFontSize, // 使用响应式字体大小
                fontWeight: "normal",
              },
            },
            emphasis: {
              disabled: false,
              label: {
                show: false,
                fontSize: 20,
                fontWeight: "bold",
                color: "#000",
              },
            },
            data: [
              {
                value: data.positive,
                itemStyle: { color: "#2FAA68" },
              },
              {
                value: data.neutral,
                itemStyle: { color: "#EFB82C" },
              },
              {
                value: data.negative,
                itemStyle: { color: "#CE4049" },
              },
            ],
          },
        ],
        
        
      };
    },
  },
};
</script>

<style scoped lang="scss">
.analytics-card {
  position: relative;
  height: 200px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  .month-label {
    margin-top: 10px;
    margin-bottom: 8px;
    height: 30px;
    color: #454545;
    font-size: 0.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .chart-container {
    position: absolute;
    top: -6px;
    left: 0;
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 骨架屏样式 */
  .skeleton-chart {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .skeleton-circle {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: #f0f0f0;
      position: relative;
      animation: skeleton-pulse 1.5s infinite;

      &::after {
        content: "";
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: #fff;
        top: 20px;
        left: 20px;
      }
    }

    .skeleton-text {
      margin-top: 15px;
      width: 60px;
      height: 24px;
      background: #f0f0f0;
      border-radius: 4px;
      animation: skeleton-pulse 1.5s infinite;
    }

    .skeleton-percentage {
      margin-top: 8px;
      width: 80px;
      height: 16px;
      background: #f0f0f0;
      border-radius: 4px;
      animation: skeleton-pulse 1.5s infinite;
    }
  }

  @keyframes skeleton-pulse {
    0%,
    100% {
      opacity: 0.6;
    }
    50% {
      opacity: 0.3;
    }
  }
}

// // 响应式调整：当屏幕宽度小于1150px时
// @media (max-width: 1150px) {
//   .analytics-card {
//     .month-label {
//       font-size: 0.11rem; // 略微减小月份标签字体
//     }
//   }
// }
</style>
